<template>
  <div class="content">
    <div class="lines" v-for="(item, i) in tablelist" :key="'item_' + i">
      <!-- 按钮选择 -->
      <el-button v-if="item.type == 'add'" icon="el-icon-plus" type="primary"
        >添加</el-button
      >
      <!-- 时间选择 -->
      <div class="time" v-if="item.type == 'time'">
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="model.date1"
            style="width: 100%;"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-col>
        <el-col class="line" :span="2">-</el-col>
        <el-col :span="11">
          <el-date-picker
            type="date"
            placeholder="选择日期"
            v-model="model.date2"
            style="width: 100%;"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-col>
      </div>
      <!-- 下拉选择框 -->
      <el-select v-model="model[item.name]" v-if="item.type == 'select'">
        <el-option
          v-for="(items, i) in item.select"
          :key="'select_' + i"
          :label="items.name"
          :value="i"
        ></el-option>
      </el-select>
      <!-- 输入框 -->
      <el-input
        v-if="item.type == 'search'"
        v-model="model[item.name]"
        :placeholder="place"
      ></el-input>
    </div>
    <slot name="btns" :data="model"></slot>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
@Component({})
export default class extends Vue {
  @Prop({}) tablelist!: {}[];
  @Prop({ default: "请输入您要搜索的内容" }) place!: string;
  public model: any = {};
}
</script>

<style lang="scss" scoped>
.content {
  padding: 10px 0px;
  margin: 5px 0px;
  display: flex;
  align-items: center;
  .lines {
    display: flex;
    align-items: center;
    margin-right: 10px;
    .time {
      width: 35%;
      display: flex;
      align-items: center;
    }
  }
}
</style>
